<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站约会列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: #333;
        }
        
        .section-title {
            text-align: center;
            margin: 2rem 0 3rem;
            color: #2c3e50;
            position: relative;
            padding-bottom: 1rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #3498db, #2980b9);
            border-radius: 3px;
        }
        
        .listing-container {
            margin-bottom: 4rem;
        }
        
        .listing-type-title {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #eee;
            color: #34495e;
        }
        
        .date-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.07);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .date-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        /* 作者信息样式 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }
        
        .author-name {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .post-time {
            font-size: 0.85rem;
            color: #7f8c8d;
        }
        
        /* 统计信息样式 */
        .stats {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .stats span {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .stats .interested {
            color: #e74c3c;
        }
        
        /* 按钮样式 */
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        .btn-like, .btn-save {
            transition: all 0.2s ease;
        }
        
        .btn-like:hover, .btn-save:hover {
            transform: translateY(-2px);
        }
        
        /* 样式1：标准卡片式 */
        .style-standard .date-card {
            padding: 1.25rem;
        }
        
        .style-standard .date-header {
            margin-bottom: 1rem;
        }
        
        .style-standard .date-title {
            font-size: 1.35rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
        }
        
        .style-standard .date-title:hover {
            color: #3498db;
        }
        
        .style-standard .date-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .style-standard .date-meta i {
            width: 16px;
            text-align: center;
            margin-right: 0.35rem;
            color: #3498db;
        }
        
        .style-standard .date-content {
            color: #34495e;
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }
        
        .style-standard .date-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #f1f1f1;
        }
        
        /* 图片容器样式 */
        .image-container {
            margin-bottom: 1.25rem;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .multi-image {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .multi-image img {
            width: 100%;
            height: 100px;
            object-fit: cover;
        }
        
        .multi-image img:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }
        
        .multi-image img:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
        }
        
        .multi-image img:nth-child(3) {
            grid-column: 1;
            grid-row: 2;
        }
        
        .multi-image img:nth-child(4) {
            grid-column: 2;
            grid-row: 2;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        
        /* 样式2：图片主导式 */
        .style-image-focused .date-card {
            display: flex;
            flex-direction: column;
        }
        
        .style-image-focused .image-container {
            margin-bottom: 0;
            flex-shrink: 0;
        }
        
        .style-image-focused .image-container img {
            height: 220px;
        }
        
        .style-image-focused .card-body {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .style-image-focused .date-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #2c3e50;
        }
        
        .style-image-focused .date-excerpt {
            color: #34495e;
            margin-bottom: 1rem;
            flex-grow: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .style-image-focused .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1.25rem 1.25rem;
        }
        
        /* 样式3：紧凑列表式 */
        .style-compact .date-card {
            display: flex;
            padding: 1rem;
            align-items: center;
        }
        
        .style-compact .image-container {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            margin-bottom: 0;
        }
        
        .style-compact .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-compact .no-image-placeholder {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            background-color: #f1f5f9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 2rem;
        }
        
        .style-compact .card-content {
            flex-grow: 1;
            margin-left: 1rem;
        }
        
        .style-compact .date-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: #2c3e50;
        }
        
        .style-compact .date-meta {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin-bottom: 0.5rem;
        }
        
        .style-compact .date-meta i {
            width: 14px;
            text-align: center;
            margin-right: 0.25rem;
        }
        
        .style-compact .card-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-image-focused .multi-image img {
                height: 80px;
            }
            
            .style-compact .date-card {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .style-compact .image-container,
            .style-compact .no-image-placeholder {
                width: 100%;
                height: 160px;
            }
            
            .style-compact .card-content {
                margin-left: 0;
                margin-top: 1rem;
                width: 100%;
            }
            
            .style-compact .card-actions {
                margin-top: 1rem;
                width: 100%;
                justify-content: space-between;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title">社交约会列表</h1>
        
        <!-- 标准卡片式 -->
        <div class="listing-container style-standard">
            <h3 class="listing-type-title">
                <i class="fas fa-th-large me-2"></i>标准卡片式约会
            </h3>
            
            <!-- 多图约会 -->
            <div class="date-card">
                <div class="date-header">
                    <div class="author-info">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="author-avatar">
                        <div>
                            <div class="author-name">林小雨</div>
                            <div class="post-time">发布于 2小时前</div>
                        </div>
                    </div>
                    
                    <h2 class="date-title">周末户外野餐聚会，寻找志同道合的朋友</h2>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月15日 周六 14:00</span>
                        <span><i class="fas fa-map-marker-alt"></i> 城市中央公园</span>
                        <span><i class="fas fa-user-friends"></i> 限8人</span>
                    </div>
                    
                    <div class="image-container">
                        <div class="multi-image">
                            <img src="https://picsum.photos/id/292/400/300" alt="野餐地点环境">
                            <img src="https://picsum.photos/id/431/400/300" alt="野餐食物">
                            <img src="https://picsum.photos/id/225/400/300" alt="公园风景">
                            <img src="https://picsum.photos/id/306/400/300" alt="活动示意图">
                        </div>
                        <div class="image-count">4张图片</div>
                    </div>
                    
                    <p class="date-content">
                        周末天气正好，想组织一次轻松愉快的户外野餐活动。我们可以一起分享美食，玩桌游，聊天交流。我会准备一些零食和饮料，也欢迎大家带上自己喜欢的食物一起分享。地点在中央公园的湖边草坪，环境优美，适合拍照。希望能认识一些新朋友，度过一个愉快的周末！
                    </p>
                </div>
                
                <div class="date-footer">
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 248 浏览</span>
                        <span class="interested"><i class="fas fa-heart"></i> 36 人有意向</span>
                        <span><i class="fas fa-bookmark"></i> 12 收藏</span>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-sm btn-outline-primary btn-like">
                            <i class="far fa-heart"></i> 感兴趣
                        </button>
                        <button class="btn btn-sm btn-outline-secondary btn-save">
                            <i class="far fa-bookmark"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-outline-info">
                            <i class="fas fa-info-circle"></i> 详情
                        </button>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-user-plus"></i> 报名参加
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 单图约会 -->
            <div class="date-card">
                <div class="date-header">
                    <div class="author-info">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="author-avatar">
                        <div>
                            <div class="author-name">王大力</div>
                            <div class="post-time">发布于 昨天 18:30</div>
                        </div>
                    </div>
                    
                    <h2 class="date-title">周六下午电影爱好者交流会</h2>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月15日 周六 15:00</span>
                        <span><i class="fas fa-map-marker-alt"></i> 星光电影院 + 咖啡厅</span>
                        <span><i class="fas fa-user-friends"></i> 不限人数</span>
                    </div>
                    
                    <div class="image-container">
                        <img src="https://picsum.photos/id/1058/800/400" alt="电影院和电影海报" class="single-image">
                    </div>
                    
                    <p class="date-content">
                        本周六下午有一部新上映的文艺片，想找些同样喜欢电影的朋友一起观看，之后可以去附近的咖啡厅讨论交流。我已经看过预告片，感觉很值得一看。无论你是电影爱好者还是只是想找个伴，都欢迎加入。费用AA制，有意向的朋友请留言或直接报名。
                    </p>
                </div>
                
                <div class="date-footer">
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 312 浏览</span>
                        <span class="interested"><i class="fas fa-heart"></i> 28 人有意向</span>
                        <span><i class="fas fa-bookmark"></i> 19 收藏</span>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-sm btn-outline-primary btn-like">
                            <i class="far fa-heart"></i> 感兴趣
                        </button>
                        <button class="btn btn-sm btn-outline-secondary btn-save">
                            <i class="far fa-bookmark"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-outline-info">
                            <i class="fas fa-info-circle"></i> 详情
                        </button>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-user-plus"></i> 报名参加
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图约会 -->
            <div class="date-card">
                <div class="date-header">
                    <div class="author-info">
                        <img src="https://picsum.photos/id/26/100/100" alt="用户头像" class="author-avatar">
                        <div>
                            <div class="author-name">张萌萌</div>
                            <div class="post-time">发布于 3天前</div>
                        </div>
                    </div>
                    
                    <h2 class="date-title">读书会：分享你最近读过的好书</h2>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月18日 周二 19:00</span>
                        <span><i class="fas fa-map-marker-alt"></i> 静心书店二楼</span>
                        <span><i class="fas fa-user-friends"></i> 限12人</span>
                    </div>
                    
                    <p class="date-content">
                        每月一次的读书会又要开始了！这次我们不限定书籍类型，你可以分享任何一本最近读过并觉得有价值的书。每人有10分钟的分享时间，然后是自由讨论环节。书店会提供免费茶水，也可以点一些咖啡和小点心。希望通过这个活动，能和大家交流思想，发现更多好书。请参加的朋友提前准备一下分享内容。
                    </p>
                </div>
                
                <div class="date-footer">
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 187 浏览</span>
                        <span class="interested"><i class="fas fa-heart"></i> 15 人有意向</span>
                        <span><i class="fas fa-bookmark"></i> 8 收藏</span>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="btn btn-sm btn-outline-primary btn-like">
                            <i class="far fa-heart"></i> 感兴趣
                        </button>
                        <button class="btn btn-sm btn-outline-secondary btn-save">
                            <i class="far fa-bookmark"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-outline-info">
                            <i class="fas fa-info-circle"></i> 详情
                        </button>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-user-plus"></i> 报名参加
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图片主导式 -->
        <div class="listing-container style-image-focused">
            <h3 class="listing-type-title">
                <i class="fas fa-image me-2"></i>图片主导式约会
            </h3>
            
            <div class="row">
                <!-- 多图约会 -->
                <div class="col-md-6">
                    <div class="date-card">
                        <div class="image-container">
                            <div class="multi-image">
                                <img src="https://picsum.photos/id/1036/400/300" alt="徒步路线风景">
                                <img src="https://picsum.photos/id/1039/400/300" alt="山顶景色">
                                <img src="https://picsum.photos/id/1061/400/300" alt="山间溪流">
                            </div>
                            <div class="image-count">3张图片</div>
                        </div>
                        
                        <div class="card-body">
                            <div class="author-info">
                                <img src="https://picsum.photos/id/342/100/100" alt="用户头像" class="author-avatar">
                                <div class="author-name">李强</div>
                            </div>
                            
                            <h3 class="date-title">周日郊外徒步活动，寻找同行伙伴</h3>
                            
                            <p class="date-excerpt">
                                计划周日去郊外的青山步道徒步，全程约10公里，难度适中，适合有一定体力的朋友。山顶风景非常美，适合拍照。我们会在山下集合，一起出发...
                            </p>
                            
                            <div class="date-meta">
                                <span><i class="fas fa-calendar-alt"></i> 6月16日 周日 8:00</span>
                                <span><i class="fas fa-map-marker-alt"></i> 青山风景区</span>
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <div class="stats">
                                <span><i class="fas fa-eye"></i> 215</span>
                                <span class="interested"><i class="fas fa-heart"></i> 23</span>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-sm btn-outline-primary btn-like">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary btn-save">
                                    <i class="far fa-bookmark"></i>
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    报名
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图约会 -->
                <div class="col-md-6">
                    <div class="date-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/292/800/400" alt="美食分享会" class="single-image">
                        </div>
                        
                        <div class="card-body">
                            <div class="author-info">
                                <img src="https://picsum.photos/id/237/100/100" alt="用户头像" class="author-avatar">
                                <div class="author-name">陈美食</div>
                            </div>
                            
                            <h3 class="date-title">家常菜分享会，一起学做拿手菜</h3>
                            
                            <p class="date-excerpt">
                                想组织一次小型的家常菜分享会，每个人带一道自己的拿手菜，分享做法和心得。我会准备场地和一些基础食材，大家可以一起交流厨艺...
                            </p>
                            
                            <div class="date-meta">
                                <span><i class="fas fa-calendar-alt"></i> 6月20日 周五 18:30</span>
                                <span><i class="fas fa-map-marker-alt"></i> 阳光社区厨房</span>
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <div class="stats">
                                <span><i class="fas fa-eye"></i> 342</span>
                                <span class="interested"><i class="fas fa-heart"></i> 41</span>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-sm btn-outline-primary btn-like">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary btn-save">
                                    <i class="far fa-bookmark"></i>
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    报名
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 紧凑列表式 -->
        <div class="listing-container style-compact">
            <h3 class="listing-type-title">
                <i class="fas fa-list me-2"></i>紧凑列表式约会
            </h3>
            
            <!-- 多图约会 -->
            <div class="date-card">
                <div class="image-container">
                    <div class="multi-image">
                        <img src="https://picsum.photos/id/1059/200/200" alt="画展作品">
                        <img src="https://picsum.photos/id/1056/200/200" alt="画展现场">
                    </div>
                    <div class="image-count">2张图片</div>
                </div>
                
                <div class="card-content">
                    <h3 class="date-title">现代艺术展参观，寻找艺术爱好者</h3>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月17日 周一 10:00</span>
                        <span><i class="fas fa-map-marker-alt"></i> 当代艺术馆</span>
                    </div>
                    
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 156</span>
                        <span class="interested"><i class="fas fa-heart"></i> 18</span>
                        <span><i class="fas fa-user"></i> 主办方: 刘艺术</span>
                    </div>
                </div>
                
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline-primary btn-like">
                        <i class="far fa-heart"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary btn-save">
                        <i class="far fa-bookmark"></i>
                    </button>
                    <button class="btn btn-sm btn-primary">
                        报名
                    </button>
                </div>
            </div>
            
            <!-- 无图约会 -->
            <div class="date-card">
                <div class="no-image-placeholder">
                    <i class="fas fa-music"></i>
                </div>
                
                <div class="card-content">
                    <h3 class="date-title">古典音乐会门票两张，寻找同伴</h3>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月25日 周六 19:30</span>
                        <span><i class="fas fa-map-marker-alt"></i> 城市音乐厅</span>
                    </div>
                    
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 203</span>
                        <span class="interested"><i class="fas fa-heart"></i> 27</span>
                        <span><i class="fas fa-user"></i> 主办方: 赵音乐</span>
                    </div>
                </div>
                
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline-primary btn-like">
                        <i class="far fa-heart"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary btn-save">
                        <i class="far fa-bookmark"></i>
                    </button>
                    <button class="btn btn-sm btn-primary">
                        报名
                    </button>
                </div>
            </div>
            
            <!-- 单图约会 -->
            <div class="date-card">
                <div class="image-container">
                    <img src="https://picsum.photos/id/1080/200/200" alt="瑜伽活动" class="single-image">
                </div>
                
                <div class="card-content">
                    <h3 class="date-title">户外瑜伽体验课，适合初学者</h3>
                    
                    <div class="date-meta">
                        <span><i class="fas fa-calendar-alt"></i> 6月19日 周一 7:00</span>
                        <span><i class="fas fa-map-marker-alt"></i> 河滨公园</span>
                    </div>
                    
                    <div class="stats">
                        <span><i class="fas fa-eye"></i> 189</span>
                        <span class="interested"><i class="fas fa-heart"></i> 31</span>
                        <span><i class="fas fa-user"></i> 主办方: 孙瑜伽</span>
                    </div>
                </div>
                
                <div class="card-actions">
                    <button class="btn btn-sm btn-outline-primary btn-like">
                        <i class="far fa-heart"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary btn-save">
                        <i class="far fa-bookmark"></i>
                    </button>
                    <button class="btn btn-sm btn-primary">
                        报名
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 处理点赞按钮交互
            const likeButtons = document.querySelectorAll('.btn-like');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.remove('btn-outline-primary');
                        this.classList.add('btn-primary');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('btn-primary');
                        this.classList.add('btn-outline-primary');
                    }
                    
                    // 更新感兴趣数量（模拟）
                    const card = this.closest('.date-card');
                    const interestCountElem = card.querySelector('.stats .interested');
                    if (interestCountElem) {
                        let countText = interestCountElem.textContent;
                        let count = parseInt(countText.match(/\d+/)[0]);
                        
                        if (icon.classList.contains('fas')) {
                            count++;
                        } else {
                            count--;
                        }
                        
                        interestCountElem.innerHTML = `<i class="fas fa-heart"></i> ${count} 人有意向`;
                    }
                });
            });
            
            // 处理收藏按钮交互
            const saveButtons = document.querySelectorAll('.btn-save');
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.remove('btn-outline-secondary');
                        this.classList.add('btn-secondary');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('btn-secondary');
                        this.classList.add('btn-outline-secondary');
                    }
                    
                    // 更新收藏数量（模拟）
                    const card = this.closest('.date-card');
                    const saveCountElem = card.querySelector('.stats span:has(.fas.fa-bookmark)');
                    if (saveCountElem) {
                        let countText = saveCountElem.textContent;
                        let count = parseInt(countText.match(/\d+/)[0]);
                        
                        if (icon.classList.contains('fas')) {
                            count++;
                        } else {
                            count--;
                        }
                        
                        saveCountElem.innerHTML = `<i class="fas fa-bookmark"></i> ${count} 收藏`;
                    }
                });
            });
            
            // 处理详情按钮点击
            const detailButtons = document.querySelectorAll('button:has(.fas.fa-info-circle)');
            detailButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.date-card');
                    const title = card.querySelector('.date-title').textContent;
                    alert(`查看 "${title}" 的详细信息`);
                });
            });
            
            // 处理报名按钮点击
            const joinButtons = document.querySelectorAll('button:has(.fas.fa-user-plus), button:contains("报名")');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.date-card');
                    const title = card.querySelector('.date-title').textContent;
                    alert(`您已成功报名参加 "${title}"`);
                });
            });
        });
    </script>
</body>
</html>
    
